<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex flex-direction flex-wrap align-stretch benben-position-layout flex homePage_flex_0"
        :class="scrollTop>50 ? 'active' : ''"
        :style="{height:(100+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub homePage_fd0_0'>
          <image class='homePage_fd0_0_c0' mode="aspectFit" :src='STATIC_URL+"67.png"'></image>
          <view class='flex flex-wrap align-center flex-sub homePage_fd0_0_c1' @tap.stop="handleJumpDiy"
            data-type="navigateTo" :data-url="`/pages/shouye/searchFor/searchFor`">
            <image class='homePage_fd0_0_c1_c0' mode="aspectFit" :src='STATIC_URL+"68.png"'></image>
            <text class='flex-sub' style="color:#999;font-size:28rpx">{{$t('请输入搜索内容')}}</text>
            <!-- <input class='flex-sub' type="text" :placeholder="$t('请输入搜索内容')" confirm-type="done" :maxlength="-1"
              :disabled='true' placeholder-style="color:#999;font-size:28rpx" /> -->
          </view>
          <!-- <view class='flex flex-direction flex-wrap align-center homePage_fd0_0_c2' @tap.stop="handleJumpDiy"
            data-type="navigateTo" :data-url="`/pages/map/mapone`">
            <image class='homePage_fd0_0_c2_c0' mode="aspectFit" :src='STATIC_URL+"34.png"'></image>
            <text class='homePage_fd0_0_c2_c1'>{{$t('地图')}}</text>
          </view> -->
          <view class='flex flex-direction flex-wrap align-center homePage_fd0_0_c2' @tap.stop="handleJumpDiy"
            data-type="navigateTo" :data-url="`/pages/wode/myMessage/myMessage`">
            <image class='homePage_fd0_0_c2_c0' mode="aspectFit" :src='STATIC_URL+"69.png"'></image>
            <text class='homePage_fd0_0_c2_c1'>{{$t('消息')}}</text>
            <benben-message-num class='homePage_fd0_0_c3_c2' :message-num="Message.all" size='24' color='#fff'
              background-color='#EC5C4E'>
            </benben-message-num>
          </view>
        </view>

      </view>
      <view :style="{height: (100+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-wrap align-center justify-center benben-flex-layout">
        <view style="position: relative">
          <swiper @change="bannerIndexfd1_0 = $event.detail.current" class='flex position-relative homePage_fd1_0'
            previous-margin="0rpx" next-margin="0rpx" :display-multiple-items="1" :interval="5000" :duration="500"
            :autoplay='true' :circular='true'>

            <template v-for='(item,key0) in carousel'>
              <swiper-item class='flex  homePage_fd1_0' :key='key0' @click.stop="goUrl(item)" data-type="navigateTo"
                :data-url="item.href">
                <image class='homePage_fd1_0_c1_c0' mode="scaleToFill" :src='item.thumb'></image>
              </swiper-item>
            </template>

          </swiper>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-wrap align-center justify-between benben-flex-layout homePage_flex_2">
        <view class='flex flex-direction flex-wrap align-center homePage_fd2_0' @tap.stop="handleJumpDiy"
          data-type="navigateTo" :data-url="`/pages/shouye/sourcesHousing/sourcesHousing?tabls=1`">
          <text class='homePage_fd2_0_c0'>{{$t('长租独立单位')}}</text>
        </view>
        <view class='flex flex-direction flex-wrap align-center homePage_fd2_1' @tap.stop="handleJumpDiy"
          data-type="navigateTo" :data-url="`/pages/shouye/sourcesHousing/sourcesHousing?tabls=2`">
          <text class='homePage_fd2_0_c0'>{{$t('劏房/套房')}}</text>
        </view>
        <view class='flex flex-direction flex-wrap align-center homePage_fd2_2' @tap.stop="handleJumpDiy"
          data-type="navigateTo" :data-url="`/pages/shouye/sourcesHousing/sourcesHousing?tabls=3`">
          <text class='homePage_fd2_0_c0'>{{$t('短租独立单位')}}</text>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout homePage_flex_3">
        <view class='flex flex-wrap align-end homePage_fd3_0'>
          <text class='homePage_fd3_0_c0'>{{$t('为您推荐')}}</text>
        </view>
        <template v-for='(item,key0) in houseList'>
          <view class='flex flex-wrap align-center homePage_fd3_1'
            @tap.stop="listJumpFunc(item.publisher_type,item.aid)" :key='key0'>
            <!-- <template v-for='(child,key1) in item.images'> -->
            <view class='flex flex-direction flex-wrap align-start homePage_fd3_1_c0'>
              <image class='homePage_fd3_1_c0_c0' mode="aspectFill" :src="item.images[0] || '/static/logo.png'"></image>
              <text class='homePage_fd3_1_c0_c1'
                v-if=" item.rental_method=='1' && item.publisher_type!=4">{{item.rental_method_name}}</text><text
                class='homePage_fd3_1_c0_c1_1'
                v-if=" item.rental_method=='2' && item.publisher_type!=4">{{item.rental_method_name}}</text>
            </view>
            <!-- </template> -->

            <view class='flex flex-direction flex-wrap align-stretch flex-sub'>
              <view class='flex flex-wrap align-center' v-if=" item.publisher_type!='4'">
                <text class='homePage_fd3_1_c1_c0_c0'>{{item.name}}</text>
              </view>
              <view class='flex flex-wrap align-center' v-if=" item.publisher_type=='4'">
                <text class='homePage_fd3_1_c1_c1_c0'>{{item.apartmentbrand_name}}</text>
                <text class='homePage_fd3_1_c1_c1_c1'>{{item.name}}</text>
              </view>
              <view class='flex flex-wrap align-center homePage_fd3_1_c1_c2' v-if=" item.publisher_type!='4'">
                <text class='homePage_fd3_1_c1_c2_c0'>{{item.housingtype_name}}</text>
                <text class='homePage_fd3_1_c1_c2_c0'>{{item.housinglift_name}}</text>
                <text class='homePage_fd3_1_c1_c2_c0'>{{item.housingtenantgender_name}}</text>
                <text class='homePage_fd3_1_c1_c2_c0'>{{item.area}}<text>{{$t('㎡')}}</text></text>
              </view>
              <view class='flex flex-wrap align-center homePage_fd3_1_c1_c2'>
                <image class='homePage_fd3_1_c1_c3_c0' mode="aspectFill" :src='STATIC_URL+"32.png"'></image>
                <text class='homePage_fd3_1_c1_c3_c1'>{{item.addr_pname}}-{{item.housingaddress_name}}</text>
              </view>
              <view class='flex flex-wrap align-center homePage_fd3_1_c1_c4' v-if=" item.publisher_type!='4'">
                <text class='homePage_fd3_1_c1_c4_c0'>{{$t('HK$')}}</text>
                <text class='homePage_fd3_1_c1_c4_c1'>{{item.monthly_rent}}</text>
                <text class='homePage_fd3_1_c1_c4_c0'>/{{$t('月')}}</text>
              </view>
              <view class='flex flex-direction flex-wrap align-stretch' v-if=" item.publisher_type=='4'">
                <template v-for='(child,key1) in item.house_list'>
                  <view class='flex flex-wrap align-center justify-between homePage_fd3_1_c1_c5_c0' :key='key1'>
                    <text class='homePage_fd3_1_c1_c5_c0_c0'>{{child.name}}</text>
                    <view class='flex flex-wrap align-center'>
                      <text class='homePage_fd3_1_c1_c4_c0'>{{$t('HK$')}}</text>
                      <text class='homePage_fd3_1_c1_c4_c1'>{{child.price}}</text>
                      <text class='homePage_fd3_1_c1_c4_c0'>/{{$t('月')}}</text>
                    </view>
                  </view>
                </template>

              </view>
            </view>
          </view>
        </template>
        <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
          :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
      </view>

      <!---flex布局flex布局结束-->
      <!-- #ifdef APP || APP-PLUS -->
      <app-update ref="update" :auto="true"></app-update>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view class="text-df text-white flex align-center justify-between fixedupload" @click.stop="upLoad">
        <view class="flex align-center">
          <image src="../../../static/logo.png" mode=""></image>
          <view class="">使用 NextRent App 解鎖完整功能 </view>
        </view>
        <view class="text-sm btns">去下載</view>
      </view>
      <!-- #endif -->
    </view>
  </view>
</template>
<script>
  import pagingList from '@/common/mixin/paging_list.js';
  import {
    validate
  } from '@/common/utils/validate.js'
  export default {
    components: {},
    mixins: [pagingList],

    data() {
      return {
        "bannerIndexfd1_0": 0,
        "minixPagingListsApi": "",
        "pageingListApiMethod": "",
        "allowOnloadGetList": false,
        "Message": {
          "article": "",
          "message": "",
          "chat": "",
          "all": ""
        },
        "carousel": [],
        "JingangList": [],
        "houseList": [],
        language_id: '',
        timer: '',
        scrollTop: '',
        page: ''
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },
      isLogin() {
        return this.$store.state.token == '' ? false : true;
      }
    },
    watch: {},
    onLoad(options) {

      if (global.appTabBarType) this.toHomeDiy()
      if (this.isLogin) {
        this.getCornerFunc()
      }

      this.getDistrictFunc()
      // this.timer = setInterval(res => {
      //   // this.page = 1

      // }, 300)

    },
    onUnload() {

    },
    onReady() {
      // #ifdef APP
      this.$util.debounce(
        () => {
          this.$refs.update.checkAppUpdate()
        },
        1000,
        true
      )
      // #endif

    },
    onShow() {
      this.language_id = global.locale
      uni.setTabBarItem({
        index: 0,
        text: this.$t('首页'),
        iconPath: '/static/tab/tab_diy0.png',
        selectedIconPath: '/static/tab/tab_diy0_active.png'
      })
      uni.setTabBarItem({
        index: 1,
        text: this.$t('求房源'),
        iconPath: '/static/tab/tab_diy1.png',
        selectedIconPath: '/static/tab/tab_diy1_active.png'
      })
      uni.setTabBarItem({
        index: 2,
        text: this.$t('发房源'),
        iconPath: '/static/tab/tab_diy2.png',
        selectedIconPath: '/static/tab/tab_diy2_active.png'
      })
      uni.setTabBarItem({
        index: 3,
        text: this.$t('我的'),
        iconPath: '/static/tab/tab_diy3.png',
        selectedIconPath: '/static/tab/tab_diy3_active.png'
      })
      this.getHouselistFunc()
      this.getRotationFunc()
      if (this.isLogin) {
        this.getCornerFunc()
      }
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {
      this.getHouselistFunc()
      this.getDistrictFunc()
    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

      this.scrollTop = e.scrollTop

    },
    methods: {
      upLoad() {
        let platform = uni.getSystemInfoSync().platform
        if (platform == 'ios') {
          window.location.href = "https://apps.apple.com/cn/app/nextrent/id6475764677"
        } else {
          window.location.href = "https://play.google.com/store/apps/details?id=com.xianggangfangyuans.benben&pli=1"
        }
      },
      goUrl(item) {
        // #ifdef APP || APP-PLUS || APP-NVUE
        uni.navigateTo({
          url: `/pages/benben-built-in/web-view/web-view?webPath=${item.href}`
        })
        // #endif
        // #ifdef H5
        window.location.href = item.href
        // #endif
        // uni.navigateTo({
        //   url: `/pages/benben-built-in/web-view/web-view?webPath=${item.href}`
        // })
      },
      //获取消息角标
      async getCornerFunc() {
        //请求方法
        //数据验证

        let datadata = await this.$api.get(global.apiUrls.post64241ca6cf066, {

        });

        if (datadata.data.code != 1) {
          this.$message.info(datadata.data.msg);
          return
        }
        let infodata = datadata.data;
        this.Message = infodata.data

      },
      //获取房屋列表
      getHouselistFunc() {
        this.minixPagingListsApi = global.apiUrls.post65433985092d4;
        this.pageingListApiMethod = 'post';
        this.allowOnloadGetList = false;
        this.pagingListPostDataContent = {
          is_recommend: '1',
        }
        this.listData = [];
        this.houseList = this.listData;
        this.pagingListToggle();

      },
      //获取消息角标
      async getCornerFunc() {
        //请求方法
        //数据验证

        let dataMessage = await this.$api.get(global.apiUrls.post64241ca6cf066, {

        });

        if (dataMessage.data.code != 1) {
          this.$message.info(dataMessage.data.msg);
          return
        }
        let infoMessage = dataMessage.data;
        this.Message = infoMessage.data

      },
      //获取轮播图
      async getRotationFunc() {
        //请求方法
        //数据验证

        let datacarousel = await this.$api.get(global.apiUrls.post641e624160dd0, {
          type: '1',
          partner_id: '0',
          sort_type: 'desc'
        });

        if (datacarousel.data.code != 1) {
          this.$message.info(datacarousel.data.msg);
          return
        }
        let infocarousel = datacarousel.data;
        this.carousel = infocarousel.data

      },
      //获取金刚区
      async getDistrictFunc() {
        //请求方法
        //数据验证

        let dataJingangList = await this.$api.get(global.apiUrls.post641e5f0526964, {

        });

        if (dataJingangList.data.code != 1) {
          this.$message.info(dataJingangList.data.msg);
          return
        }
        clearInterval(this.timer);
        let infoJingangList = dataJingangList.data;
        this.JingangList = infoJingangList.data
        uni.stopPullDownRefresh()

      },
      //列表跳转
      listJumpFunc(type, id) {
        if (type != '4') {
          this.$urouter.navigateTo(`/pages/shouye/propertyDetails/propertyDetails?id=${id}`);
        } else {
          this.$urouter.navigateTo(`/pages/shouye/apartmentDetails/apartmentDetails?id=${id}`);
        }
      },
      pagingListPostData() {
        return this.pagingListPostDataContent
      }
    }
  };
</script>
<style lang="scss" scoped>
  .fixedupload {
    width: 100%;
    position: fixed;
    bottom: 100rpx;
    padding: 32rpx 24rpx;
    left: 0;
    text-align: center;
    background-color: #000;
    z-index: 9;
    border-radius: 44rpx 44rpx 0 0;

    image {
      width: 50rpx;
      height: 50rpx;
      border-radius: 16rpx;
      margin-right: 12rpx;
    }

    .btns {
      width: 120rpx;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 16rpx;
      text-align: center;
      width: #0181ff;
      background-color: #0181ff;
    }
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: url(image-path('26.png')) no-repeat, #F8F8F8;
    background-size: 100% auto;
  }

  .homePage_flex_0 {
    background: url(image-path('26.png')) no-repeat;

    &.active {
      background: #FFFFFF;
    }

    width: 750rpx;
    height: 100rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto;
  }

  .homePage_fd0_0_c3_c2 {
    position: absolute;
    top: -8rpx;
    right: -8rpx;
  }

  .homePage_fd0_0_c2_c1 {
    color: #333333;
    font-size: 22rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .homePage_fd0_0_c2_c0 {
    width: 40rpx;
    height: 40rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .homePage_fd0_0_c2 {
    margin: 0rpx 0rpx 0rpx 34rpx;
    position: relative;
  }

  .homePage_fd0_0_c1_c0 {
    width: 40rpx;
    height: 40rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 8rpx 0rpx 0rpx;
  }

  .homePage_fd0_0_c1 {
    background: rgba(255, 255, 255, 1);
    border-radius: 36rpx;
    background-size: 100% auto;
    padding: 16rpx 24rpx 16rpx 24rpx;
  }

  .homePage_fd0_0_c0 {
    width: 122rpx;
    height: 72rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 32rpx 0rpx 0rpx;
  }

  .homePage_fd0_0 {
    padding: 0rpx 26rpx 0rpx 24rpx;
  }

  .homePage_numberfd1_0_c0 {
    background: #d5d5d5;
    position: absolute;
    bottom: 20rpx;
    right: 30rpx;
    width: 80rpx;
    height: 40rpx;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 46rpx;
    font-weight: 400;
  }

  .homePage_fd1_0_c1_c0 {
    width: 702rpx;
    height: 320rpx;
    border-radius: 16rpx;
  }

  .homePage_fd1_0 {
    width: 702rpx;
    height: 320rpx;
  }

  .homePage_swiperDotUnselectedfd1_0 {
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.3);
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  .homePage_swiperDotSelectedfd1_0 {
    border: 1px solid #00A7FF;
    background: #00A7FF;
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }

  ::v-deep .homePage_swiperDotfd1_0 {
    position: absolute;
    bottom: 8rpx;
    left: 0rpx;
    right: 0rpx;
  }

  .homePage_flex_2 {
    padding: 0rpx 24rpx 0rpx 24rpx;
    margin: 32rpx 0rpx 0rpx 0rpx;
  }

  .homePage_fd2_2 {
    background: url(image-path('30.png')) no-repeat;
    width: 216rpx;
    height: 180rpx;
    border-radius: 16rpx;
    background-size: 100% auto;
  }

  .homePage_fd2_1 {
    background: url(image-path('29.png')) no-repeat;
    width: 216rpx;
    height: 180rpx;
    border-radius: 16rpx;
    background-size: 100% auto;
  }

  .homePage_fd2_0_c0 {
    color: #FFFFFF;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 42rpx;
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .homePage_fd2_0 {
    background: url(image-path('28.png')) no-repeat;
    width: 216rpx;
    height: 180rpx;
    border-radius: 16rpx;
    background-size: 100% auto;
  }

  .homePage_flex_3 {
    padding: 0rpx 24rpx 0rpx 24rpx;
    margin: 32rpx 0rpx 0rpx 0rpx;
  }

  .homePage_fd3_1_c1_c5_c0_c0 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .homePage_fd3_1_c1_c5_c0 {
    margin: 27rpx 0rpx 0rpx 0rpx;
  }

  .homePage_fd3_1_c1_c4_c1 {
    color: #F7582F;
    font-size: 36rpx;
    font-weight: 700;
    line-height: 36rpx;
  }

  .homePage_fd3_1_c1_c4_c0 {
    color: #F7582F;
    font-size: 24rpx;
    font-weight: 700;
    line-height: 32rpx;
  }

  .homePage_fd3_1_c1_c4 {
    margin: 13rpx 0rpx 0rpx 0rpx;
  }

  .homePage_fd3_1_c1_c3_c1 {
    color: #666666;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
    width: 300rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .homePage_fd3_1_c1_c3_c0 {
    width: 24rpx;
    height: 24rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 4rpx 0rpx 0rpx;
  }

  .homePage_fd3_1_c1_c2_c0 {
    background: rgba(243, 245, 250, 1);
    color: rgba(106, 124, 143, 1);
    font-size: 22rpx;
    font-weight: 400;
    line-height: 32rpx;
    padding: 0rpx 7rpx 0rpx 7rpx;
    background-size: 100% auto !important;
    margin: 0rpx 10rpx 0rpx 0rpx;
  }

  .homePage_fd3_1_c1_c2 {
    margin: 8rpx 0rpx 0rpx 0rpx;
  }

  .homePage_fd3_1_c1_c1_c1 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 42rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: 245rpx;
  }

  .homePage_fd3_1_c1_c1_c0 {
    background: linear-gradient(134deg, #FF9402 0%, #FFCE00 100%);
    padding: 6rpx 4rpx 6rpx 4rpx;
    background-size: 100% auto;
    color: #FFFFFF;
    font-size: 24rpx;
    font-weight: 500;
    line-height: 24rpx;
    border-radius: 4rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    // width: 106rpx;
    padding: 6rpx 6rpx;
    margin: 0rpx 9rpx 0rpx 0rpx;
  }

  .homePage_fd3_1_c1_c0_c0 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 42rpx;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .homePage_fd3_1_c0_c1_1 {
    background: rgba(250, 164, 58, 0.8);
    padding: 6rpx 14rpx 6rpx 14rpx;
    border-radius: 16rpx 0rpx 16rpx 0rpx;
    background-size: 100% auto;
    color: #FFFFFF;
    font-size: 24rpx;
    font-weight: 500;
    line-height: 24rpx;
    position: absolute;
    top: 0rpx;
    left: 0rpx;
  }

  .homePage_fd3_1_c0_c1 {
    background: rgba(52, 122, 255, 0.8);
    padding: 6rpx 14rpx 6rpx 14rpx;
    border-radius: 16rpx 0rpx 16rpx 0rpx;
    background-size: 100% auto;
    color: #FFFFFF;
    font-size: 24rpx;
    font-weight: 500;
    line-height: 24rpx;
    position: absolute;
    top: 0rpx;
    left: 0rpx;
  }

  .homePage_fd3_1_c0_c0 {
    width: 226rpx;
    height: 226rpx;
    border-radius: 16rpx;
  }

  .homePage_fd3_1_c0 {
    position: relative;
    margin: 0rpx 24rpx 0rpx 0rpx;
  }

  .homePage_fd3_1 {
    background: rgba(255, 255, 255, 1);
    border-radius: 16rpx;
    background-size: 100% auto !important;
    margin: 0rpx 0rpx 24rpx 0rpx;
    padding: 24rpx;
  }

  .homePage_fd3_0_c0 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .homePage_fd3_0 {
    margin: 0rpx 0rpx 16rpx 0rpx;
  }
</style>
